<template>
  <div>
    <p>名字：<input type="text" v-model="from.name"></p>
    <p>年龄：<input type="text" v-model="from.age"></p>
    <p>性别：<input type="text" v-model="from.gender"></p>
    <p>参演的电影：<select v-model="from.movie">
      <option v-for="i in movies" :value="i.id">{{i.name}}</option>
    </select></p>
    <button @click="add">添加</button>
    <br>
    <br>
    <br>
    <table border="1" align="center">
      <tr>
        <td>演员名字</td>
        <td>演员年龄</td>
        <td>演员性别</td>
      </tr>
      <tr v-for="i in actor">
        <td>{{i.name}}</td>
        <td>{{i.age}}</td>
        <td>{{i.gender}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "actor",
  data(){
    return{
      from:{},
      movies:[],
      actor:[]
    }
  },
  methods:{
    get_movie(){
      this.$axios.get('users/movie/')
        .then(res=>{
          if (res.data.code==200){
            this.movies = res.data.list
          }
        })
    },
    add(){
      this.$axios.post('users/actor/',this.from)
        .then(res=>{
          if(res.data.code==200){
            alert('添加成功')
          }else {
            alert('添加失败')
          }
        })
    },
    get_actor(){
      this.$axios.get('users/actor/')
        .then(res=>{
          if(res.data.code==200){
            this.actor=res.data.list
          }
        })
    }
  },
  mounted() {
    this.get_movie()
    this.get_actor()
  }
}
</script>

<style scoped>

</style>
